CSS Drop Shadow
A drop shadow is a graphical effect that simulates the shadow of an object and gives the appearance of further dimensions. Though CSS does not have a 'Drop Shadow' property it is possible to leverage style sheets to keep your image separate from it's drop shadow. Why Use CSS to Create a Drop Shadow There are many theoretical as well as practical reasons why a designer would chose to add a Drop Shadow to an image by using CSS: # Create visual hierarchy: often Web pages (or any visual design for that matter) can seem "flat" whereby the information being displayed doesn't stand out in any meaningful order for which it should be consumed. By adding a drop shadow to an image designers add a visual effect that creates an additional dimension to the design that in turn can add clarity to the visual hierarchy of how information on a Web page is intended to be consumed. # Accentuate Figure-Ground Segregation: in Gestalt Theory Figure-Ground Segregation states that in order for an image to stand out it must be distinct from its background. By adding a drop shadow to an image designers ensure that the image stands out and is distinct from its background and thus is appreciated as it is meant to be appreciated. # Separate image and display: this reason, of the ones listed, is the most linked to why a designer would use CSS to create a drop shadow and not just produce the drop shadow effect in Photoshop. By using CSS to create the drop shadow effect designers can separate the visual display of an image (drop shadow) from the image itself, thus making any future changes to the Web page more sustainable and turnkey as they will not be tied to editing an actual image, rather a designer will only have to tweak a few lines of code. How to Create a Drop Shadow with CSS Creating a Drop Shadow in CSS can be achieved in 5 easy steps: # Create Shadow Image # Set Shadow as Background # Negative Margins # Float Div # Better Shadows 4 Better Browsers Create Shadow Image *Choose your preferred photo editor and create a GIF image that resembles the shadow effect you would like to create. Remember, don't add a border, and make it larger than you will need (recommended: 800x800 pixels). Once you've saved one file as a GIF, save another file with full alpha transparency (i.e. no background color) as a PNG file. *See here: GIF, and here PNG for examples Set Shadow as Background *Create a Div for your background image to live in: (div class="img-shadow") (img src="yourfile.jpg" alt="test") /div) *Set your newly created Shadow file as the background: background: url(shadow.gif) no-repeat bottom right; Negative Margins *This step is very easy. Essentially we're adding a negative margin to the top and left borders of the image to create the distinction between the image and the shadow. To do this, add enough margin to offset the image, but not too much. 6 pixels should work well. *Here's the code: margin: -6px 6px 6px -6px; Float Div *Another easy step. We want to float the Div so that it doesn't take up all the available space on the horizontal axis. *Here's the code: float:left; Better Shadows 4 Better Browsers *Most browsers support PNG files, but for those that don't we have a backup GIF file. In order to ensure the PNG file is displayed most often, use this code: background: url(shadowAlpha.png) no-repeat right bottom !important; *The !important piece of code actually forces the browser to give this action precedent. So, when or if you switch background colors, browsers that support PNG will ensure a transparent shadow, so that background color is kept intact. CSS Code ::.img-shadow { :: float:left; :: background: url(shadowAlpha.png) no-repeat bottom right !important; :: background: url(shadow.gif) no-repeat bottom right; :: margin: 10px 0 0 10px !important; :: margin: 10px 0 0 5px; :: } ::.img-shadow img { :: display: block; :: position: relative; :: background-color: #fff; :: border: 1px solid #a9a9a9; :: margin: -6px 6px 6px -6px; :: padding: 4px; :: } Reference Links * Easy CSS drop shadows, 1976Design * CSS Drop Shadows, A List Apart * CSS Drop Shadow Tests, Phil Baines * Gestalt Psychology, Wikipedia * CSS Drop Shadows, W3C * PNG VS. GIF, W3C Category:Production